<template>
  <div class="home">
    <dashboardDate @change="changeFn" />
    <div id="main" style="width: 90%;height:500px; margin-top: 20px;"></div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import dashboardDate from '../components/dashboardDate'
export default {
  data() {
    return {
      dateArr: [], //x轴的数据
      legendArr: [], //小图标
      series: [], //详细的数据
      colorArr: ['#3888fa', '#FF005A', '#ccc', 'aqua'],
      dateObj: {}
    }
  },
  computed: {
    roles(){
      return this.$store.state.Logins.roles
    },
    id(){
      return this.$store.state.Logins.id
    }
  },
  components: {
    dashboardDate
  },
  async mounted() {
    let date = new Date()
    let y = date.getFullYear()
    let m = this.zeroFn(date.getMonth() + 1)
    let arr = await this.getListFn({ date: y + '-' + m, roles: this.roles, uid: this.id })
    this.setDateFn(arr)
    this.drawChart();
  },
  methods: {
    ...mapActions('dashboard',['getListFn']),
    async changeFn(date) {
      this.dateArr = []
      this.legendArr = []
      this.series = []
      this.dateObj = {}
      let y = date.getFullYear()
      let m = this.zeroFn(date.getMonth() + 1)
      let arr = await this.getListFn({ date: y + '-' + m, roles: this.roles, uid: this.id })
      if(!arr.length){
        return
      }
      this.setDateFn(arr)
      this.drawChart()
    },
    setDateFn(arr){
      let str = arr[0].name
      let num = 0
      arr.forEach(val=>{
        // x轴时间
        if(this.dateArr.indexOf(val.date) == -1){
          this.dateArr.push(val.date)
        }
        // 小图标
        if(this.legendArr.indexOf(val.name) == -1){
          this.legendArr.push(val.name)
        }
        // 成绩
        if(this.dateObj[val.name]){
          this.dateObj[val.name].push(val.date)
        }else{
          this.dateObj[val.name] = []
          this.dateObj[val.name].push(val.date)
        }
        if(val.name == str){
          if(!this.series[num]){
            this.series[num] = {}
            this.series[num].name = val.name
            this.series[num].type = 'line'
            this.series[num].itemStyle = {
              color: this.colorArr[num],
              lineStyle: {
                color: this.colorArr[num],
                width: 2
              }
            }
          }
        }else{
          str = val.name
          num ++
          this.series[num] = {}
          this.series[num].name = val.name
          this.series[num].type = 'line'
          this.series[num].itemStyle = {
            color: this.colorArr[num],
            lineStyle: {
              color: this.colorArr[num],
              width: 2
            }
          }
        }
        this.series[num].data = []
      })

      this.series.forEach((val, ind) => {
        this.dateArr.forEach((value, index) => {
          if (this.dateObj[val.name].indexOf(value) != -1) {
            let { score } = arr.find(item => {
              return item.name == val.name && item.date == value
            })
            this.series[ind].data[index] = score
          } else {
            this.series[ind].data[index] = 0
          }
        })
      })

    },
    drawChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: '考试成绩统计'
        },
        xAxis: {
          data: this.dateArr,
          boundaryGap: false,
          axisTick: {
            show: false
          }
        },
        legend: {
          data: this.legendArr
        },
        grid: {
          left: 90,
          right: 70,
          bottom: 20,
          top: 50,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: 1
        },
        yAxis: {
          axisTick: {
            show: false
          }
        },
        series: this.series
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    zeroFn(val) {
      return val < 10 ? '0' + val : val
    }
  }
};
</script>
